import React, {CSSProperties} from "react";
import {Col as AntdCol, Form as AntdForm} from 'antd';
import {
    renderItems,
    VJsonComponent,
    VJsonComponentBase,
} from "../factory";
import _ from 'lodash'
import {toJS} from "mobx";
import {apply} from "..";

export interface ColVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean
    style?: CSSProperties
    flex?: string | number
    offset?: number
    order?: number

    pull?: number
    push?: number
    span?: number
    xs?: number | object
    sm?: number | object
    md?: number | object
    lg?: number | object
    xl?: number | object
    xxl?: number | object
    className?:string

    /**
     * 内容元素
     */
    items: any[]
}

export interface ColState {

}

@VJsonComponent({
    view: 'col'
})
export default class Row extends VJsonComponentBase<ColVJsonProp, ColState> {
    static defaultProps: ColVJsonProp = {
        visible: true,
        items: []
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Row.defaultProps
        )
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        return (
            // @ts-ignore
            <AntdCol key={this.key} view_id={this.key} aria-roledescription={this.view} className={this.props.vjson.className}
                     style={apply(this, toJS(this.props.vjson.style))}
                     flex={apply(this, this.props.vjson.flex)}
                     offset={apply(this, this.props.vjson.offset)}
                     order={apply(this, this.props.vjson.order)}
                     pull={apply(this, this.props.vjson.pull)}
                     push={apply(this, this.props.vjson.push)}
                     span={apply(this, this.props.vjson.span)}
                     xs={apply(this, this.props.vjson.xs)}
                     sm={apply(this, this.props.vjson.sm)}
                     md={apply(this, this.props.vjson.md)}
                     lg={apply(this, this.props.vjson.lg)}
                     xl={apply(this, this.props.vjson.xl)}
                     xxl={apply(this, this.props.vjson.xxl)}
            >
                {
                    ...renderItems(this, this.props.vjson.items)
                }
            </AntdCol>
        )
    }
}
